<template>
  <div id="whole">
    <!--头部-->
    <div class="section-address">
      <div class="hd">
        <span class="el-icon-s-order"></span>
        <span>确认订单</span>
      </div>
    </div>
    <!--主体部分-->
    <div class="content">
      <div class="title">
        <p class="address-body">收获地址</p>
        <ul>
          <li>
            <h2>程同学</h2>
            <p>13580018623</p>
            <p>广东 广州市 白云区 江高镇</p>
            <p>广东白云学院</p>
          </li>
          <li>
            <h2>程同学</h2>
            <p>13580018623</p>
            <p>广东 茂名市 化州市 杨梅镇</p>
            <p>***</p>
          </li>
          <li>
            <span class="el-icon-circle-plus-outline"></span>
            <p>添加新地址</p>
          </li>
        </ul>
        <p class="sh">商品及优惠券</p>
        <div class="divone" v-for="(item, index) in allList" :key="index">
          <span>
            <img :src="'http://106.15.179.105:3000/' + item.productImg" alt=""
          /></span>

          <span>
            {{ item.productName }}
          </span>
          <span> {{ item.price }}X{{ item.num }} </span>
          <span>
            {{ item.price * item.num }}
          </span>
        </div>
        <div class="divtwo">
          <p class="title">配送方式</p>
          <p class="articles">包邮</p>
        </div>
        <div class="divthree">
          <p class="title">发票</p>
          <p class="articles">电子发票</p>
          <p class="articles">个人</p>
          <p class="articles">商品明细</p>
        </div>
      </div>
      <div class="smallj">
        <div>
          <span class="titles">商品件数</span>
          <span class="essays">{{ this.amount }}</span>
        </div>
        <div>
          <span class="titles">商品总价</span>
          <span class="essays">{{ this.totalprices }}</span>
        </div>
        <div>
          <span class="titles">活动优惠</span>
          <span class="essays">-0</span>
        </div>
        <div>
          <span class="titles">优惠卷抵扣</span>
          <span class="essays">-0</span>
        </div>
        <div>
          <span class="titles">运费</span>
          <span class="essays">0</span>
        </div>
        <div>
          <span class="titles">应付总额</span>
          <span class="essays">{{ this.totalprices }}</span>
        </div>
      </div>
      <div class="footers">
        <el-button @click="$router.push('/shoppingCart')">返回购物车</el-button>
        <el-button type="warning" @click="addLists()">结算</el-button>
      </div>
    </div>
    <login-module ref="loginRef"></login-module>
  </div>
</template>

<script>
import confirmOrder from "../../api/confirmOrderApi";
export default {
  components: {},
  name: "",
  data() {
    return {
      allList: [],
      totalprices: 0, //总价
      amount: 0, //总数
    };
  },
  created() {},
  activated() {
    this.allList = this.$store.state.addList;
    console.log(this.allList);
    this.getPrice();
  },
  methods: {
    async addLists() {
      let { data: res } = await confirmOrder.setList({
        user_id: this.$store.state.user_id,
        products: this.$store.state.addList,
      });
      if (res.code == "001") {
        this.$notify({
          message: res.msg,
          type: "success",
        });
        this.$router.push("/order");
      }
    },
    //计算价格
    getPrice() {
      this.allList.forEach((item) => {
        this.totalprices += item.price * item.num;
        this.amount += item.num;
      });
    },
  },
  computed: {},
};
</script>

<style lang="scss" scoped>
#whole {
  background-color: #f5f5f5;
  .section-address {
    width: 100%;
    height: 64px;
    border-bottom: 2px solid orangered;
    background-color: white;
    .hd {
      width: 1225px;
      margin: 0 auto;
      height: 64px;
      line-height: 64px;
      font-size: 28px;
    }
    span:nth-child(1) {
      color: orangered;
      margin-right: 10px;
    }
  }
  .content {
    padding-top: 34px;
    width: 1225px;
    min-height: 904px;
    margin: 0 auto;
    margin: auto;
    .title {
      .sh {
        color: #333;
        font-size: 18px;
        line-height: 40px;
        height: 40px;
        margin-top: 40px;
        border-bottom: 1px solid #cccccc;
      }
      ul {
        list-style: none;
        display: flex;
        li {
          width: 220px;
          height: 198px;
          margin: 0px 20px;
          padding: 12px;
          border: 1px solid #e0e0e0;
        }
        h2 {
          font-size: 18px;
          font-weight: 400;
          line-height: 30px;
          margin-bottom: 10px;
        }
        p {
          margin-bottom: 5px;
        }
        li:nth-child(1) {
          border: 1px solid salmon;
        }
        li:nth-child(3) {
          text-align: center;
          padding-top: 60px;
        }
      }
      .divone {
        border-bottom: 1px solid #cccccc;
        display: flex;
        justify-content: space-between;
        padding: 15px;
        img {
          width: 30px;
          height: 30px;
        }
      }
      .divtwo {
        display: flex;
        align-items: center;
        padding: 15px;
        .articles {
          line-height: 38px;
          font-size: 14px;
          color: #ff6700;
        }
      }
      .divthree {
        display: flex;
        align-items: center;
        border-top: 1px solid #cccccc;
        padding: 15px;
        .articles {
          line-height: 38px;
          font-size: 14px;
          margin-right: 20px;
          color: #ff6700;
        }
      }
      .title {
        width: 150px;
        color: #333;
        font-size: 18px;
        line-height: 38px;
      }
    }
    .smallj {
      width: 1225px;
      margin: 0 auto;
      padding: 20px 0px;
      text-align: right;
      .titles {
        width: 126px;
        height: 30px;
        display: inline-block;
        line-height: 30px;
        color: rgb(117, 117, 117);
      }
      .essays {
        min-width: 105px;
        height: 30px;
        display: inline-block;
        line-height: 30px;
        color: rgb(255, 103, 0);
      }
    }
  }
  .footers {
    padding: 20px 5px;
    border-top: 2px solid rgb(245, 245, 245);
    overflow: hidden;
    text-align: right;
  }
  .address-body {
    color: rgb(51, 51, 51);
    font-size: 18px;
    line-height: 20px;
    margin-bottom: 20px;
  }
}
</style>
